<template>
<div class="search-box">
  <div v-title data-title="搜索"></div>
<div class="search-container">
        <div class="m-topSearchIpt ipt" style="width:90%">
          <input type="text" v-model="zz" @keyup.enter="setHistory(zz)"  v-focus/>
          <div class="tips">
            <i class="icon iconfont icon-search" v-if="!zz.length"></i>
            <span class="placeholder" v-if="!zz.length" >
                <span >搜索商品</span>
            </span>
            </div>
        </div>
        <span @click="$router.go(-1)" style="margin-left:5px;">取消</span>
        
      </div> 
      <div class="hot-search">
          <h2>热门搜索</h2>
          <ul>
              <li v-for="item in hotList">
                  <span @click="setHistory(item)">{{item}}</span>
              </li>
          </ul>
      </div>
      <div class="hot-search" v-if="searchHistory.length">
          <h2>搜索历史</h2>
          <ul v-if="">
              <li v-for="item in searchHistory" >
                  <span @click="setHistory(item)">{{item}}</span>
              </li>
          </ul>
          <div class="clear-history" @click="clearHistory()">清空搜索历史</div>
      </div>
      </div>
</template>
<script>
import {getStore, setStore} from '@/config/mUtils'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      zz: '',
      hotList: [],
      searchHistory: []
    }
  },
  created () {
    this.getHotKeywords()
    if (getStore('searchHistory')) {
      this.searchHistory = JSON.parse(getStore('searchHistory'));
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
    // // 元素调用 focus 获取焦点
    //     el.nextElementSibling.style.left = '0'
    //     el.nextElementSibling.style.marginLeft = '0'
        el.focus()
      }
    }
  },
  methods: {
    getHotKeywords () {
      var self = this
      this.$http.get('http://127.0.0.1:8998/api/searchKeywords?code=cf259ae69d5142df937212c53f8dc3a6')
        .then(function (response) {
          self.hotList = response.data.ret_data;
          console.log(response.data.ret_data);
        })
       .catch(function (error) {
         console.log(error);
       });
    },
    setHistory (historyWords) {
      var self = this
    //   this.searchHistory.push(historyWords)
    //   setStore('searchHistory', this.searchHistory)
      let history = getStore('searchHistory');
      if (history) {
        let checkrepeat = false;
        this.searchHistory = JSON.parse(history);
        this.searchHistory.forEach(item => {
          if (item === historyWords) {
            checkrepeat = true;
          }
        })
        if (!checkrepeat && historyWords !== '') {
          this.searchHistory.push(historyWords)
        }
      } else {
        this.searchHistory.push(historyWords)
      }
      setStore('searchHistory', this.searchHistory)
      if (historyWords === '') {
        Toast('搜索关键词不能为空！')
      } else {
        self.$router.push({path: 'searchList', query: { searchWord: historyWords }})
      }
    },
    clearHistory () {
      this.searchHistory = [];
      setStore('searchHistory', this.searchHistory);
    }
  }
}
</script>
<style lang="scss" scoped>
.search-box{background: #fff;}
.hot-search{padding: .6rem 1rem;
    h2{font-size: .6rem; margin-bottom: .1rem;}
    ul{
        padding: 0;
        li{ font-size: .4rem; background: #f0f2f5; border-radius: .2rem; display: inline-block; text-align: center; padding: .1rem .4rem; 
        margin: 0 .2rem .2rem 0;}
    }
    .clear-history{ font-size: .6rem; margin-top: 1rem; text-align: center;}
}
</style>

